﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <span class="label label-info pull-left " style="font-size:17px;">今日</span>
                    </div>
                    <div class="ibox-content">
                        <table class="table border-bottom table-hover" id="daySts">
                            <tbody>
                            <tr>
                                <td class="no-top-border font-bold">登录人数</td>
                                <td class="no-top-border" ></td>
                                <td class="text-navy no-top-border"> <i class="fa fa-level-up"></i> - </td>
                                <td class="no-top-border">-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">登录人次</td>
                                <td><span class="pie"></span></td>
                                <td class="text-warning"> <i class="fa fa-level-down"></i> - </td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">活跃度</td>
                                <td><span class="pie"></span></td>
                                <td class="text-navy"> <i class="fa fa-level-up"></i> - </td>
                                <td>-</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">上月</span>
                        <span class="label label-info pull-left"  style="font-size:17px;">本月</span>
                    </div>
                    <div class="ibox-content">
                        <table class="table border-bottom table-hover"  id="monthSts">
                            <tbody>
                            <tr>
                                <td class="no-top-border font-bold">登录人数</td>
                                <td class="no-top-border"><span class="pie"></span></td>
                                <td class="text-navy no-top-border"> <i class="fa fa-level-up"></i> - </td>
                                <td class="no-top-border">-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">登录人次</td>
                                <td><span class="pie"></span></td>
                                <td class="text-warning"> <i class="fa fa-level-down"></i> - </td>
                                <td>-</td>
                            </tr>
                            <tr>
                                <td class="font-bold">活跃度</td>
                                <td><span class="pie"></span></td>
                                <td class="text-navy"> <i class="fa fa-level-up"></i> - </td>
                                <td>-</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>近30天系统登录人数，人次，活跃度</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="stsUser30DayBehaviorChart">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>近12月系统登录人数，人次，活跃度</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="stsUser12MonthBehaviorChart">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

            </div>
        </div>
    </div>

    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
    <script src="js/plugins/flot/jquery.flot.js"></script>
    <script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="js/plugins/peity/jquery.peity.min.js"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/highcharts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/modules/exporting.min.js"></script>
</body>
<script>
    $(function(){
	    initUserBehavior();
	    initUser30DayBehavior();
        initUser12MonthBehavior();
	})
	function initUserBehavior(){
        var url = 'userBehavior/getStsUserBehavior';
        jQuery.ajax({
            url:domain + url,
            type:"get",
            data:{},
            crossDomain:true,
            async:true,
            xhrFields:{
                withCredentials:true
            },
            success:function (data) {
                if(data.status == 200){
                    combUserBehaviorHTML(data.data);
                }else{
                    top.toastr.warning(data.msg);
                }
            },
            error:function(data) {
                top.toastr.error("菜单加载失败，请检查网络");
            }
        })

    }

	function initUser30DayBehavior(){
        var url = 'userBehavior/getSysUserStsDayList';
        jQuery.ajax({
            url:domain + url,
            type:"get",
            data:{},
            crossDomain:true,
            async:true,
            xhrFields:{
                withCredentials:true
            },
            success:function (data) {
                if(data.status == 200){
                    combUser30DayBehaviorHTML(data.data);
                }else{
                    top.toastr.warning(data.msg);
                }
            },
            error:function(data) {
                top.toastr.error("菜单加载失败，请检查网络");
            }
        })

    }

    function initUser12MonthBehavior(){
        const url = 'userBehavior/getSysUserStsMonthList';
        jQuery.ajax({
            url:domain + url,
            type:"get",
            data:{},
            crossDomain:true,
            async:true,
            xhrFields:{
                withCredentials:true
            },
            success:function (data) {
                if(data.status == 200){
                    combUser12MonthBehaviorHTML(data.data);
                }else{
                    top.toastr.warning(data.msg);
                }
            },
            error:function(data) {
                top.toastr.error("菜单加载失败，请检查网络");
            }
        })

    }



        function combUserBehaviorHTML(data){
            $("#daySts").find("tbody tr").eq(0).find("td").eq(1).html(data.todayLoginNop);
            $("#daySts").find("tbody tr").eq(1).find("td").eq(1).html(data.todayLoginNot);
            $("#daySts").find("tbody tr").eq(2).find("td").eq(1).html(data.todayNumBehavior);

            $("#daySts").find("tbody tr").eq(0).find("td").eq(3).html(data.yesterdayLoginNop);
            $("#daySts").find("tbody tr").eq(1).find("td").eq(3).html(data.yesterdayLoginNot);
            $("#daySts").find("tbody tr").eq(2).find("td").eq(3).html(data.yesterdayNumBehavior);


            $("#monthSts").find("tbody tr").eq(0).find("td").eq(1).html(data.thisMonthLoginNop);
            $("#monthSts").find("tbody tr").eq(1).find("td").eq(1).html(data.thisMonthLoginNot);
            $("#monthSts").find("tbody tr").eq(2).find("td").eq(1).html(data.thisMonthNumBehavior);

            $("#monthSts").find("tbody tr").eq(0).find("td").eq(3).html(data.lastMonthLoginNop);
            $("#monthSts").find("tbody tr").eq(1).find("td").eq(3).html(data.lastMonthLoginNot);
            $("#monthSts").find("tbody tr").eq(2).find("td").eq(3).html(data.lastMonthNumBehavior);

        }

	function combUser30DayBehaviorHTML(data){
	    let loginNop = [];
	    let loginNot = [];
	    let numBehavior = [];
	    let dateList = [];
	    for(var i=0;i<data.length;i++){
		loginNop.push(data[i].loginNop);
		loginNot.push(data[i].loginNot);
		numBehavior.push(data[i].numBehavior);
		dateList.push(data[i].date);
	    }
	    stsUser30DayChart(dateList,loginNop,loginNot,numBehavior);
	}
    function combUser12MonthBehaviorHTML(data){
        let loginNop = [];
        let loginNot = [];
        let numBehavior = [];
        let dateList = [];
        for(var i=0;i<data.length;i++){
            loginNop.push(data[i].loginNop);
            loginNot.push(data[i].loginNot);
            numBehavior.push(data[i].numBehavior);
            const yearMonth = data[i].year + "-" + data[i].month;
            dateList.push(yearMonth);
        }
        stsUser12MonthChart(dateList,loginNop,loginNot,numBehavior);
    }
	function stsUser30DayChart(dateList, loginNop,loginNot,numBehavior){
	    Highcharts.chart('stsUser30DayBehaviorChart', {
		title: {
			//text: '近30天系统登录人数，人次，活跃度'
			text: ''
		},
		subtitle: {
			//text: '数据来源：味道日损'
		},
		chart: {
			zoomType: 'xy'
		},
		yAxis: [{
			labels:{
				style:{
					color: Highcharts.getOptions().colors[1]
				}
			},
			title: {
				text: '活跃度',
				style:{
					color: Highcharts.getOptions().colors[1]
				}
			}
		},{
			labels:{
				style:{
					color: Highcharts.getOptions().colors[0]
				}
			},
			title: {
				text: '人数/人次',
				style:{
					color: Highcharts.getOptions().colors[0]
				}
			},
			opposite: true
		}],
		xAxis: {
		    categories: dateList,
		    crosshair: true
		},
		tooltip: {
			shared: true
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'bottom',
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
		},
                credits:{
                    enabled:false
                },
		series: [{
			name: '登录人数',
			type: 'column',
			data: loginNop,
			yAxis: 1
		}, {
			name: '登录人次',
			data: loginNot,
			type: 'column',
			yAxis: 1
		}, {
			name: '活跃度',
			data: numBehavior,
			type: 'spline'
		}],
	    });
	}

    function stsUser12MonthChart(dateList, loginNop,loginNot,numBehavior){
        Highcharts.chart('stsUser12MonthBehaviorChart', {
            title: {
                //text: '近30天系统登录人数，人次，活跃度'
                text: ''
            },
            subtitle: {
                //text: '数据来源：味道日损'
            },
            chart: {
                zoomType: 'xy'
            },
            yAxis: [{
                labels:{
                    style:{
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '活跃度',
                    style:{
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            },{
                labels:{
                    style:{
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                title: {
                    text: '人数/人次',
                    style:{
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            xAxis: {
                categories: dateList,
                crosshair: true
            },
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'bottom',
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            credits:{
                enabled:false
            },
            series: [{
                name: '登录人数',
                type: 'column',
                data: loginNop,
                yAxis: 1
            }, {
                name: '登录人次',
                data: loginNot,
                type: 'column',
                yAxis: 1
            }, {
                name: '活跃度',
                data: numBehavior,
                type: 'spline'
            }],
        });
    }
    </script>
</html>
